<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>完善资料</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/mui.picter.min.css"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/addData.css"/>
  <script src="../js/datepicker.js"></script>
    <!--城市 学校-->
 <!--   <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"/>
    <link rel="stylesheet" href="../css/city/mpicker.css"/>-->
    <!--//生日-->
    <script src="../js/birthday/jquery.1.7.2.min.js"></script>
    <script src="../js/birthday/mobiscroll_002.js" type="text/javascript"></script>
    <script src="../js/birthday/mobiscroll_004.js" type="text/javascript"></script>
    <link href="../css/birthday/mobiscroll_002.css" rel="stylesheet" type="text/css">
    <link href="../css/birthday/mobiscroll.css" rel="stylesheet" type="text/css">
    <script src="../js/birthday/mobiscroll.js" type="text/javascript"></script>
    <script src="../js/birthday/mobiscroll_003.js" type="text/javascript"></script>
    <script src="../js/birthday/mobiscroll_005.js" type="text/javascript"></script>
    <link href="../css/birthday/mobiscroll_003.css" rel="stylesheet" type="text/css">
    <style>
        /*改变placeholder的字体颜色*/
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #999; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #999;opacity:1;
        }

        input:-ms-input-placeholder{
            color: #999;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: #999;opacity:1;
        }
        #show span{
            width: 15px;
            height: 15px;
            border-radius: 50%  ;
            border:1px solid #999;
            margin-top: 60px;
        }
        /*mui*/
        body{
            background-color: #fff;!important;
        }
        input{
            border: none;!important;
        }
        .mui-btn{
            border: 0;
        }
        .mui-btn-blue, .mui-btn-primary, input[type=submit]{
            background-color: #f093a1;
        }
        input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{

            margin:0;
            padding: 0;
            -webkit-user-select: text;
            border: 0;
            outline: 0;
            background-color: #fff;
            -webkit-appearance: none
        position: absolute;
            right: 5%;
            width: 70%;
            text-align: right
        }
        .android-ics .dwv{
            color:#5f321a;
            border-bottom:2px solid #5f321a;
        }
        .dwl{
           color:#666;
        }
        .android-ics .dw .dwwol{
            border-bottom: 2px solid #5f321a;
            border-top: 2px solid #5f321a;
        }
        #appDate1{

            width: 70%;
            right: 0%;
            height: 100%;
        }
        .mui-btn-blue, .mui-btn-primary, input[type=submit]{
            background-color: #5f321a;
        }
    </style>
</head>
<body>
<div class="layer">
    <header class="data">完善资料</header>
    <div class="main">
        <ul>
            <li >
                <a href="school.html" class="clearfix"  id="school">
                    <span class="f_left">学校</span>
                    <i class="f_right" id="showSchool"></i>
                    <!--<input type="text" id="chooseSchool"   class=" select-value1 form-control" value="点击选择学校" readonly="readonly" style="transform: translateY(0px);">-->
                </a>
            </li>
            <li>
                <a href="class.html"><span class="f_left">专业</span>
                    <i class="f_right" id="showClass"></i>
                </a>
            </li>

            <li id="gender">
                <a href="javascript:;"><span class="f_left">性别</span>
                    <i class="f_right" id="ShowGender"></i>
                </a>
            </li>
            <div id="mask"></div>
            <div class="sex" id="show">
                <ul>
                    <li class="man clearfix" value="1">
                        <em></em>
                        <del>我是男</del>
                        <!--<label for="" class="label">
                            <input id="input" type="radio"  name="gender" value="1"  class="choose"/>
                        </label>-->
                    </li>
                    <li class="women clearfix" value="2">
                        <em></em>
                        <del>我是女</del>
                    </li>
                </ul>
            </div>
            <li>
                <a href="JavaScript:;" id="birthday">
                    <span class="f_left">生日</span>
                    <i class="f_right" id="b_Data"></i>
                    <input value="点击选择" class="birthday" readonly="" name="appDate1" id="appDate1" type="text">
                </a>
            </li>

            <li>
                <a href="javascript:;" class="clearfix" id="IN"><span class="f_left">入学时间</span>
                    <!-- <input id="demo1" placeholder="选择" />-->
                    <input id='demo1' data-options='{"type":"date"}' placeholder="选择" class="btn mui-btn mui-btn-block forInschool">
                    <div id='result' class="ui-alert"  ></div>
                    <!--<input value="点击选择" class="inSchool" readonly="" name="appDate1" id="demo1" type="text">-->
                </a>
            </li>


        </ul>
        <button id="save">保存</button>
    </div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script>

    //点击性别按钮 显示模态框 点击文档中的任意位置隐藏模态框
    var gender = document.getElementById("gender");
    var mask = document.getElementById("mask");
    var show = document.getElementById("show");
    gender.onclick = function (event) {
        // console.log("1");
        mask.style.display = "block";
        show.style.display = "block";
        /*document.body.style.overflow = "hidden"*/
        var event = event || window.event;
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    };
    document.onclick = function (event) {
        var event = event || window.event;
        var target = event.target || event.srcElement;
        if (target.id !== "show") {
            //获取事件目标 如果不是show才能消失
            mask.style.display = "none";
            show.style.display = "none";
            /* document.body.style.overflow = "auto"*/
        }
    };
    //用户输入的班级   本地存储数据
    //console.log(JSON.parse(localStorage.getItem("name")));
    var man=document.querySelector(".man");

    man.onclick=function(){
        var input=document.getElementsByClassName("choose");
        //console.log(input);
        var showGender=document.getElementById("ShowGender");
        //console.log(showGender);
        showGender.innerText="男";
        showGender.style.background="none";
        showGender.style.lineHeight="50px";
        showGender.style.fontSize="16px";
    };
    var woman=document.querySelector(".women");
    woman.onclick=function(){
        var input=document.getElementsByClassName("choose");
        //console.log(input);
        var showGender=document.getElementById("ShowGender");
        //console.log(showGender);
        showGender.innerText="女";
        showGender.style.background="none";
        showGender.style.lineHeight="50px";
        showGender.style.fontSize="16px";
    };

   /* var grade_name= localStorage.getItem("grade_name");
    var showGrade=document.getElementById("showGrade");
    //console.log(classmate);
    if(grade_name!==null){
        showGrade.innerText=grade_name;
        showGrade.style.width="150px";
        showGrade.style.background="none";
        showGrade.style.lineHeight="50px";
        showGrade.style.fontSize="16px"
    }*/
    //年级
    var classmate= JSON.parse(localStorage.getItem("class_name"));
    var showClass=document.getElementById("showClass");
    //console.log(classmate);
    if(classmate!==null) {
        showClass.innerText = classmate;
        showClass.style.width = "150px";
        showClass.style.background = "none";
        showClass.style.lineHeight = "50px";
        showClass.style.fontSize = "16px";
    }
    ///学校的输入
    var school= JSON.parse(localStorage.getItem("school_name"));
    var showSchool=document.getElementById("showSchool");
    //console.log(classmate);
    if(school!==null){
        showSchool.innerText=school;
        showSchool.style.width="150px";
        showSchool.style.background="none";
        showSchool.style.lineHeight="50px";
        showSchool.style.fontSize="16px"
    }
    //判断选中的状态 追加类名value=1；先把所有的都找到

    //生日选择逻辑
    var birthday=document.getElementById("birthday");
    var b_Data=document.getElementById("b_Data");
    var input_B=document.getElementsByClassName("birthday")[0];
    // console.log(input_B);
    var zIndex=1;
    birthday.onclick=function(){
        // alert(1);
        b_Data.style.display="none";
        //alert(1)
        // input_B.style.zIndex=zIndex;
        input_B.style.display="inline-block";
    };
    //点击保存按钮 获取到所有用户数据 发送给后台
    $("#save").click(function(){
        var inSchool=$("#demo1").val();
        console.log(inSchool);
        var sex=$("#ShowGender").text();
        console.log(sex);
        var date=$("#appDate1").val();
        /* localStorage.setItem("birthday",date);
         localStorage.setItem("sex",sex);
         localStorage.setItem("inSchool",inSchool);*/
        if(school==null){
            alert("请您完善学校信息");
        }
        else if(classmate==null){
            alert("请您完善专业信息");
        }
        else if(sex==""){
            alert("请您选择性别");
        }
        else if(date=="点击选择"){
            alert("请您选择生日");
        }
        else if(inSchool==""){
            alert("请您选择入学时间");
        }
        else{
            //console.log("学校是："+school+" 年级是："+grade_name+" 班级是："+'<br/>'+classmate+" 性别是："+sex+'<br/>'+" 生日是："+date+"入学时间是："+inSchool);
            //数据发送给后台
            date = date.replace(/-/g,"/");
            //birthday=birthday.split("-").join("");
            date=new Date(date);
            inSchool = inSchool.replace(/-/g,"/");
            inSchool=new Date(inSchool);
            var obj={};
            obj = {"sex":sex,"birthday":date,"startSchoolTime":inSchool,"major":classmate,"school.schoolName":school};
            //obj=JSON.stringify(obj);
            $.ajax({
                xhrFields: {
                    withCredentials: true
                },
                type: "post",
               // contentType: 'application/json;charset=UTF-8',
                //contentType:'application/json;charset=UTF-8',
                url: "http://192.168.1.126/student/updateStudent",
                data:obj,
                dataType: 'json',
                success:function(data) {
                    console.log(data);
                    if(data.code=="success"){
                        //跳转页面
                        localStorage.removeItem("class_name");
                        localStorage.removeItem("phone_login");
                        localStorage.removeItem("sex");
                        localStorage.removeItem("birthday");
                        window.location.href="./login.html";
                    }
                }

            })

        }
    })


</script>
<script type="text/javascript">
    $(function () {
        var currYear = (new Date()).getFullYear();
        var opt={};
        opt.date = {preset : 'date'};
        opt.datetime = {preset : 'datetime'};
        opt.time = {preset : 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear - 100, //出生生日开始年份
            endYear: currYear + 0 //结束年份
        };
        //$("#demo1").mobiscroll($.extend(opt['date'], opt['default']));
        $("#appDate1").mobiscroll($.extend(opt['date'], opt['default']));
        $("#appDate2").mobiscroll($.extend(opt['date'], opt['default']));
        var optDateTime = $.extend(opt['datetime'], opt['default']);
        var optTime = $.extend(opt['time'], opt['default']);
        $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
        $("#appTime").mobiscroll(optTime).time(optTime);

    });
</script>
<!--mui时间 -->
<script>
    (function($) {
        $.init();
        var result = $('#result')[0];
        var btns = $('.btn');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                /*
                 * 首次显示时实例化组件
                 * 示例为了简洁，将 options 放在了按钮的 dom 上
                 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                 */
                var picker = new $.DtPicker(options);
                picker.show(function(rs) {
                    /*
                     * rs.value 拼合后的 value
                     * rs.text 拼合后的 text
                     * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                     * rs.m 月，用法同年
                     * rs.d 日，用法同年
                     * rs.h 时，用法同年
                     * rs.i 分（minutes 的第二个字母），用法同年
                     */
                    var demo1=document.querySelector("#demo1");
                    demo1.value=rs.text;
                    //result.innerText = '选择结果: ' + rs.text;
                    /*
                     * 返回 false 可以阻止选择框的关闭
                     * return false;
                     */
                    /*
                     * 释放组件资源，释放后将将不能再操作组件
                     * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                     * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                     * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                     */
                    picker.dispose();
                });
            }, false);
        });
    })(mui);
</script>
</html>